
  
<template>
        <el-table row-key="id" @cell-click="tableClick" :highlight-current-row="true" :data="jobData" style="width: 100%">
          
          <el-table-column prop="name" label="职位/岗位"/>
          <!-- <el-table-column prop="jobType" label="类型" :formatter="formatter"/> -->
        </el-table>

     <div style="width:900px">
      <div style="width:400px;float: left;">
        <el-button type="primary" @click="addRole()">添加角色</el-button>
        <el-button type="primary" @click="sendJobRole()">确认</el-button>
        <el-table ref="tableRef" row-key="id" @cell-click="rowClick" :highlight-current-row="true" :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="角色名"/>
        </el-table>
      </div>

    </div>



    <el-dialog
            v-model="dialogVisible"
            v-if="dialogVisible"
            :title="parentAcl == null? '':parentAcl.name"
            width="30%"
            :before-close="handleClose"
        >
            <el-input v-model="formName" placeholder="名称" />
            <el-input v-model="formMethod" placeholder="方法" />
            <el-input v-model="formPath" placeholder="路径" />
            <el-input v-model="formIsModule" placeholder="是否是模块" />
            <el-input v-model="formIsOpen" placeholder="是否是开放" />

            <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="sendAcl">
                提交
                </el-button>
            </span>
            </template>
    </el-dialog>

    <el-dialog
            v-model="dialogVisible1"
            v-if="dialogVisible1"
            width="30%"
            :before-close="handleClose"
        >
            <el-input v-model="formName" placeholder="名称" />

            <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="sendRole">
                提交
                </el-button>
            </span>
            </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'

const tableData = ref([])
const jobData = ref([])
const aclData = ref([])
const parentAcl = ref([])

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

const curRow = ref()
const curTableRow = ref()

const treeRef = ref();
const tableRef = ref()

const formName = ref("")
const formMethod = ref("")
const formPath = ref("")
const formIsModule = ref('')
const formIsOpen = ref('')

onMounted(() => {
    loadData()
})

function addAcl(parent) {
  parentAcl.value = parent

  formName.value = ''
  formMethod.value = ''
  formPath.value = ''
  formIsModule.value = ''
  formIsOpen.value = ''

  dialogVisible.value = true
}

function addRole() {

  formName.value = ''
  formMethod.value = ''
  formPath.value = ''
  formIsModule.value = ''
  formIsOpen.value = ''

  dialogVisible1.value = true
}

function sendAcl() {
  httpRequest({
        url: '/auth/acl/add',
        method: 'post',
        data: {
          parentId: parentAcl.value == null? 0: parentAcl.value.id,
          name: formName.value,
          method: formMethod.value == 'get'? 1: 2,
          router: formPath.value,
          isModule: formIsModule.value == '是',
          isOpen: formIsOpen.value == '是'
        }
    }).then((res) => {
        if (res.code === 0) {
         loadAclData()
         dialogVisible.value = false
        }
    })
}

function sendRole() {
  httpRequest({
        url: '/auth/role/add',
        method: 'post',
        data: {
          roleName: formName.value,
        }
    }).then((res) => {
        if (res.code === 0) {
         dialogVisible1.value = false
         loadRoleData()
        }
    })
}

function loadAclData() {
  httpRequest({
        url: '/auth/acl/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          aclData.value = res.data
        }
    })
}

function rowClick(currentRow) {
  curRow.value = currentRow
  loadRoleAcl()
}

function tableClick(currentRow) {
  curTableRow.value = currentRow
  loadJobRole()
}

function loadRoleAcl() {
  httpRequest({
        url: '/auth/role/acl?roleId=' + curRow.value.id,
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          treeRef.value.setCheckedKeys(res.data)
        }
    })
}


function loadJobRole() {
  httpRequest({
        url: '/auth/job/roles?jobId=' + curTableRow.value.id,
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {

          tableData.value.forEach((t) => {

            let flag = false
            res.data.forEach((e) => {
   
              if (e == t.id) {
                tableRef.value.toggleRowSelection(t, true)
                flag = true
                return
              }

            })
              
              if (!flag) {
                tableRef.value.toggleRowSelection(t, false)
              }
             
            })

          
          
        }
    })
}

function sendRoleAcl() {

  httpRequest({
        url: '/auth/role/acl',
        method: 'post',
        data: {
          roleId: curRow.value.id,
          aclId: treeRef.value.getCheckedKeys()
        }
    }).then((res) => {
        if (res.code === 0) {
         dialogVisible.value = false
         loadRoleAcl()
        }
    })
}

function sendJobRole() {
  console.log()
  let rows = tableRef.value.getSelectionRows()
  let keys = []
  rows.forEach(e => {
    keys.push(e.id)
  });


httpRequest({
      url: '/auth/job/roles',
      method: 'post',
      data: {
        jobId: curTableRow.value.id,
        roleIdList: keys
      }
  }).then((res) => {
      if (res.code === 0) {
       loadJobRole()
      }
  })
}

function loadJobData() {
  httpRequest({
        url: '/auth/job/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          jobData.value = res.data
        }
    })
}


function loadRoleData() {
  httpRequest({
        url: '/auth/role/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          tableData.value = res.data
        }
    })
}

function loadData() {
  loadAclData()
  loadRoleData()
  loadJobData()
}

function formatter(row) {
  return row.jobType == 1? "组织": "项目"
}

const defaultProps = {
  children: 'children',
  label: 'name',
}

</script>

<style scoped>

</style>
